<template>
  <div>
    <div class="toubudaohang flex ai-c">
      <el-radio-group v-model="tabPosition">
        <el-radio-button @click.native="$router.push('/layout/videolist')" label="videolist">视频列表</el-radio-button>
        <el-radio-button @click.native="$router.push('/layout/imgslist')" label="imgslist">图片列表</el-radio-button>
        <el-radio-button @click.native="$router.push('/layout/taglist')" label="taglist">标签列表</el-radio-button>
        <el-radio-button @click.native="$router.push('/layout/classlist')" label="classlist">分类列表</el-radio-button>
        <el-radio-button @click.native="$router.push('/layout/videoaudit')" label="videoaudit">案例审核</el-radio-button>
      </el-radio-group>
    </div>
    <div class="user-content">
      <!-- 用户列表左边内容 -->
      <div class="user-Left">
        <div class="flex jc-sb" style="width: 100%">
          <div class="user-zu">
            <span>标签组</span>
          </div>
          <div class="user-jia cursor" @click="userAdddialogVisible = true">
            <i style="color: #afb2bc" class="el-icon-plus"></i>
          </div>
        </div>
        <!-- 左边分组 -->
        <div class="left-content">
          <div style="height: auto">
            <div class="w14 s-userkist ellipsis flex jc-sb" v-for="(item, index) in Usergrouplist" :key="index"
              :class="{ isUserlist: Userlist == index }" @click="setroles(item, index)">
              <div class="flex ai-c">
                <img src="@/assets/wenjianjia.png" style="width: 13px; height: 12px; margin-right: 9px" alt="" />
                <span class="ellipsis">{{ item.name }}</span>
              </div>
              <div class="write flex jc-c ai-c" v-if="item.id != 1 && item.id != 0">
                <img style="margin-left: 0" src="../assets/bi.png" alt="" @click="setuserEditdialogVisible(item)" />
                <img src="../assets/del.png" class="del-pic" alt="" @click="handleChange(item)" />
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="tagList">
        <div class="tagContent flex jc-fd">
          <!-- 头部内容 -->
          <div class="tag-input">
            <el-input clearable v-model="input" placeholder="请输入标签名称、发布人进行搜索">
            </el-input>
          </div>

          <div class="tag-btn flex ai-c">
            <el-button @click="search"></el-button>
            <el-button @click="setaddUserdialogVisible" class="add-btn">移动到</el-button>
            <el-button @click="
              (adddialogVisible = true), (edit = false), (inputValue = '')
            ">新增</el-button>
          </div>
        </div>
        <!-- 中间内容 -->
        <el-empty :image-size="200" v-if="JSON.stringify(tags) == '{}'"></el-empty>
        <div class="tagCenter" v-for="(key, name) in tags" :key="name">
          <div class="tagText">
            <p>
              {{ name.split(":")[0] }}(
              <span style="color: #afb2bc"> {{ name.split(":")[1] }} </span>)
            </p>
          </div>
          <div class="tagOne">
            <!-- <el-input
            class="zinputs"
            :key="tag.id"
            v-for="tag in key"
            v-model="tag.name"
            suffix-icon="el-icon-close"
            @close="handleClose(tag)"
          >
          </el-input> -->
            <el-checkbox-group v-model="ids">
              <span style="margin-right: 20px;" v-for="tag in key" :key="tag.id">
                <el-checkbox :label="tag.id">
                  <span></span>
                </el-checkbox>
                <el-tag class="cursor" closable @click="clickquery(tag)" @close="del(tag)">
                  {{ tag.name }}
                </el-tag>
              </span>
            </el-checkbox-group>
          </div>
        </div>
      </div>
    </div>
    <el-dialog :title="edit ? '编辑' : '新增'" :visible.sync="adddialogVisible" width="445px" center>
      <div class="add-input">
        <el-input type="text" placeholder="请输入标签名称" v-model="inputValue" />
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button class="cancelbtn" @click="adddialogVisible = false">取 消</el-button>
        <el-button class="surebtn" @click="
  adddialogVisible = false;
addTags();
        ">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 删除 -->
    <el-dialog title="删除" center :visible.sync="deldialog" width="445px">
      <div class="flex fd-c jc-c ai-c">
        <span>确认删除?</span>
      </div>

      <span slot="footer" class="dialog-footer">
        <el-button class="cancelbtn" @click="deldialog = false">取 消</el-button>
        <el-button class="surebtn" @click="godel">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 编辑 -->
    <el-dialog title="编辑分组" :visible.sync="userEditdialogVisible" width="445px" center>
      <div class="user-input">
        <el-input v-model="editusersid.name" type="text" />
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button class="cancelbtn" @click="(userEditdialogVisible = false), adminusergouplist()">取 消</el-button>
        <el-button class="surebtn" @click="adminusergroupupdate">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 新增分组 -->
    <el-dialog title="新增分组" :visible.sync="userAdddialogVisible" width="445px" center>
      <div class="user-input">
        <el-input v-model="userInfo.name" type="text" placeholder="请输入分组名称" />
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button class="cancelbtn" @click="userAdddialogVisible = false">取 消</el-button>
        <el-button class="surebtn" @click="adminusergroupadd">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 删除 -->
    <el-dialog title="删除提示" :visible.sync="dialogVisibledelShow" width="445px" center>
      <div class="del-questions" style="text-align: center">
        <p>确认删除分组?</p>

      </div>

      <span slot="footer" class="dialog-footer">
        <el-button class="cancelbtn" @click="dialogVisibledelShow = false">取 消</el-button>
        <el-button class="surebtn" @click="adminusergroupdel()">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 移动用户 -->
    <el-dialog title="移动用户" :visible.sync="addUserdialogVisible" width="445px" center>
      <div class="head-input">
        <el-select style="width: 100%" v-model="valueSings" clearable placeholder="请选择分组">
          <el-option v-for="item in Usergrouplist" :key="item.id" :label="item.name" :value="item.id">
          </el-option>
        </el-select>
      </div>
      <span slot="footer" class="dialog-footer">
        <div class="adduser-btn">
          <el-button class="cancelbtn" @click="addUserdialogVisible = false">取 消</el-button>
          <el-button class="surebtn" @click="adminuserusermove">确 定</el-button>
        </div>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import {
  adminregadd,
  admintaglist,
  admintagdel,
  admintagupdate,
  tagGroupList,
  tagAddGroup,
  tagUpdateGroup,
  tagDelGroup,
  tagMoveTag
} from "@/api/index";
export default {
  data() {
    return {
      // 标签页
      tags: {},
      adddialogVisible: false,
      dynamicTags: ["标签一", "标签二", "标签三"],
      addtag: "",
      inputVisible: false,
      inputValue: "",
      input: "",
      edit: false,
      editid: "",
      tabPosition: "taglist",
      delid: "",
      deldialog: false,
      userAdddialogVisible: false,
      Usergrouplist: [],
      Userlist: 0,
      editusersid: {},
      userEditdialogVisible: false,
      dialogVisibledelShow: false,
      userGroupId: 0,
      userInfo: {
        name: "",
      },
      addUserdialogVisible: false,
      ids: [],
      valueSings: '',
      checkedIds: []
    };
  },
  mounted() {
    document
      .querySelector("body")
      .setAttribute("style", "background-color:#f2f2f2;");
  },
  created() {
    this.adminusergouplist();
    this.admintaglist();
  },
  beforeDestroy() {
    document.querySelector("body").removeAttribute("style");
  },
  methods: {
    admintagupdate() {
      admintagupdate({
        id: this.editid,
        name: this.inputValue,
      }).then((res) => {
        this.$message.success("编辑成功");
        this.admintaglist();
      });
    },
    clickquery(tag) {
      this.inputValue = tag.name;
      this.edit = true;
      this.editid = tag.id;
      this.adddialogVisible = true;
    },
    admintagdel(ids) {
      admintagdel({
        ids,
      }).then((res) => {
        this.deldialog = false;
        this.$message({
          type: "success",
          message: "删除成功!",
        });
        this.admintaglist();
      });
    },
    search() {
      this.admintaglist();
    },
    admintaglist() {
      admintaglist({
        name: this.input,
        tagGroupId: this.userGroupId
      }).then((res) => {
        this.tags = res.data;
        console.log(res.data);
      });
    },
    adminregadd() {
      if (!this.inputValue) {
        this.$message.error("请输入内容");
        return false;
      }
      adminregadd({
        name: this.inputValue,
        tagGroupId: this.userGroupId
      }).then((res) => {
        console.log(res);
        this.$message.success("添加成功");
        this.admintaglist();
      });
    },
    godel() {
      this.admintagdel(this.delid);
    },
    del(tag) {
      this.deldialog = true;
      this.delid = tag.id;
      console.log(this.delid);
      // this.$confirm(`确定是否删除${tag.name}`, "是否继续?", "提示", {
      //   confirmButtonText: "确定",
      //   cancelButtonText: "取消",
      //   type: "warning",
      //       center: true
      // })
      //   .then(() => {
      //     this.admintagdel(tag.id);
      //   })
      //   .catch(() => {
      //     this.$message({
      //       type: "info",
      //       message: "已取消删除",
      //     });
      //   });
    },
    showInput() {
      this.inputVisible = true;
      this.$nextTick((_) => {
        this.$refs.saveTagInput.$refs.input.focus();
      });
    },
    addTag() {
      this.showInput();
    },

    // handleCloseradd(done) {
    //   this.$confirm("确认关闭？")
    //     .then((_) => {
    //       done();
    //     })
    //     .catch((_) => {});
    // },
    addTags() {
      if (this.edit) {
        this.admintagupdate();
      } else {
        this.adminregadd();
      }
      // this.dynamicTags.splice(this.dynamicTags.indexOf(tag), 1);
    },
    handleInputConfirm() {
      let inputValue = this.inputValue;
      if (inputValue) {
        this.dynamicTags.push(inputValue);
      }
      this.inputVisible = false;
      this.inputValue = "";
    },
    setroles(item, index) {
      this.userGroupId = item.id;
      this.Userlist = index;
      this.admintaglist();
    },
    setuserEditdialogVisible(item) {
      this.userEditdialogVisible = true;
      this.editusersid = item;
    },
    handleChange(val) {
      this.editusersid = val;
      this.dialogVisibledelShow = true;
    },
    adminusergroupdel() {
      tagDelGroup({
        id: this.editusersid.id,
      }).then((res) => {
        this.$message.success("删除成功");
        this.dialogVisibledelShow = false;
        this.adminusergouplist();
      });
    },
    adminusergouplist() {
      tagGroupList().then((res) => {
        console.log(res);
        this.Usergrouplist = res.data;
        this.Usergrouplist.unshift({
          id: 0,
          name: '全部'
        })
        if (!this.userGroupId) {
          this.userGroupId = this.Usergrouplist[0].id;
          this.admintaglist();
        }
      });
    },
    adminusergroupupdate() {
      tagUpdateGroup({
        id: this.editusersid.id,
        name: this.editusersid.name,
      }).then((res) => {
        this.$message.success("更改成功");
        this.adminusergouplist();
        this.userEditdialogVisible = false;
      });
    },
    adminusergroupadd() {
      tagAddGroup({
        name: this.userInfo.name,
      }).then((res) => {
        this.$message.success("添加成功");
        this.adminusergouplist();
        this.userAdddialogVisible = false;
        this.userInfo.name = "";
      });
    },
    setaddUserdialogVisible() {
      if (this.ids.length == 0) {
        this.$message.error("请至少选择一个");
        return false;
      }
      this.addUserdialogVisible = true;
    },
    adminuserusermove() {
      if (!this.valueSings) {
        this.$message.success("请选择分组");
        return false;
      }
      tagMoveTag({
        ids: this.ids.join(","),
        tagGroupId: this.valueSings,
      }).then((res) => {
        this.$message.success("移动成功");
        this.admintaglist();
        this.ids = []
        this.addUserdialogVisible = false;
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.zinputs {
  width: 100px;
  margin-right: 10px;
}

.el-icon-close:hover {
  background: #ccc;
}

.tagList {
  width: 100%;
  margin-top: 15px;
  margin-top: 25px;
  padding: 30px;
  box-sizing: border-box;
  background: #ffffff;
  box-shadow: 0px 0px 16px 0px rgba(200, 193, 194, 0.2);
  border-radius: 16px;
  height: calc(100vh - 230px);
  overflow: auto;
}

.tagContent {
  // width: 1200px;
  position: relative;
  margin-bottom: 5px;
}

.tagCenter {
  // width: 1200px;

  border-top: 1px solid #e4e7ed;
  border-bottom: 1px solid #e4e7ed;
}

.tagText {
  margin-top: 15px;

  p {
    font-size: 14px;
    color: #333333;
    font-weight: bold;
    margin-bottom: 13px;
  }
}

.tag-last {
  border-bottom: none;
}

.tagOne {
  // width: 700px;
  border-bottom: 0px solid #e4e7ed;

  // padding-bottom: 8px;
  button {
    width: 70px !important;
    height: 35px !important;
    padding: 2px 5px !important;
  }

  span {
    display: inline-block;
    // margin-right: 20px;
    margin-bottom: 20px;
  }
}

.el-tag+.el-tag {
  margin-left: 10px;
}

.button-new-tag {
  margin-left: 10px;
  height: 32px;
  line-height: 30px;
  padding-top: 0;
  padding-bottom: 0;
}

.input-new-tag {
  width: 90px;
  position: relative;
  top: -20px;
  margin-left: 10px;
  vertical-align: bottom;
}

.tag-input {
  width: 300px;
  position: relative;
  height: 35px;
  // margin-top: 20px;
  margin-bottom: 20px;
  margin-right: 30px;
}

.tag-btn {
  // margin-top: 20px;
  margin-bottom: 20px;

  button:nth-of-type(1) {
    width: 61px;
    height: 40px;
    background-size: 19px 20px;
    background-repeat: no-repeat;
    background-position: center;
    border: none;
    text-align: center;
    // border-radius: 5px;
    background-color: #ff5478;
    background-image: url("../assets/btnsearch.png");

    align-items: center;
  }

  button:nth-of-type(2) {
    width: 96px;
    height: 40px;
    color: #ffffff;
    text-align: center;
    border: none;
    // border-radius: 5px;
    background-color: #ff5478;
    /* 不支持线性的时候显示 */
    background-image: linear-gradient(to left, #ff5478, #ff7aaf);
    align-items: center;
  }

  button:nth-of-type(3) {
    width: 96px;
    height: 40px;
    color: #ffffff;
    text-align: center;
    border: none;
    // border-radius: 5px;
    background-color: #ff5478;
    /* 不支持线性的时候显示 */
    background-image: linear-gradient(to left, #ff5478, #ff7aaf);
    align-items: center;
  }
}

// .el-tabs__header {
//    width: 500px !important;
// }
// .el-tabs__header .is-top {
//  width: 500px !important;
// }
.el-tabs__nav-wrap {
  margin-top: 15px !important;
}

// 标签
.el-tag+.el-tag {
  margin-left: 10px;
}

.add-input {
  width: 100%;
  text-align: left;

  input {
    height: 35px;
    outline: none;
    border: 1px solid rgba(215, 215, 215, 1);
    padding-left: 5px;
    border-radius: 5px;
  }
}

.button-new-tag {
  margin-left: 10px;
  height: 32px;
  line-height: 30px;
  padding-top: 0;
  padding-bottom: 0;
}

.input-new-tag {
  width: 90px;
  margin-left: 10px;
  margin-top: 24px;
  vertical-align: bottom;
}

.el-dialog {
  width: 600px !important;
}

.el-dialog__body {
  min-width: 600px;
}
</style>
<style scoped lang="scss">
.toubudaohang {
  width: 100%;
  height: 84px;
  background: #ffffff;
  box-shadow: 0px 0px 16px 0px rgba(200, 193, 194, 0.2);
  border-radius: 16px;
  padding-left: 30px;
  box-sizing: border-box;
}
</style>
<style scoped lang="scss">
.tagCenter ::v-deep .el-tag {
  background: #ffffff;
  border: 1px solid #e5e5e5;
  border-radius: 4px;
  font-size: 14px;
  font-family: Source Han Sans CN;
  font-weight: 400;
  color: #60636b;
}

.tagCenter ::v-deep .el-tag .el-tag__close {
  color: #242526;
}

.tagCenter ::v-deep .el-tag .el-tag__close:hover {
  background: #afb2bc;
  color: #fff;
}
</style>
<style scoped lang="scss">
.user-Left {
  width: 280px;
  // height: 398px;
  height: calc(100vh - 230px);
  overflow: auto;
  background: #ffffff;
  box-shadow: 0px 0px 16px 0px rgba(200, 193, 194, 0.2);
  border-radius: 16px;
  background-color: #fff;
  padding: 20px;
  box-sizing: border-box;
  margin-right: 20px;
  margin-top: 25px;


  .user-zu {

    // margin-right: 114px;
    span {
      font-size: 16px;
      font-family: Source Han Sans CN;
      font-weight: 400;
      color: #2f3034;
    }
  }

  .user-jia {
    // margin-top: 6px;
  }

  .left-content {
    // width: 300px;
    margin-top: 15px;
  }

  .left-content .default {
    font-size: 14px;
    color: #333;
  }

  .left-content>div {
    // width: 270px;
    text-align: center;
  }

  .left-content .w14 {
    // width: 140px;
    height: 36px;
    cursor: pointer;
    //  padding-top: 5px;
    margin-bottom: 15px;
  }

  .left-content div a {
    text-align: center;
    padding-top: 5px;
  }

  .pic {
    width: 180px;
    display: flex;
    color: #02a7f0;
    padding-left: 49px;
    background-color: #f2f2f2f2;

    >div {
      padding-top: 10px;
      margin-left: 10px;
    }
  }

  .isgroup {
    background-color: #f2f2f2f2;
  }

  img {
    width: 14px;
    height: 14px;
    display: block;
    cursor: pointer;
    margin-left: 10px;
  }
}

.user-content {
  display: flex;
  position: relative;
  // padding-bottom: 105px;
  scroll-padding-bottom: 20px;
}

.isUserlist a {
  color: #02a7f0;
}

.isUserlist {
  // position: relative;
  background-color: #fff3f5;
}
</style>